<template>
  <div>
    <!-- 搜素栏 -->
    <div style="margin-top: 15px;">
      <el-input
        placeholder="请输入内容"
        v-model="input"
        class="input-with-select"
      >
        <el-select v-model="select" slot="prepend" placeholder="条件查询">
          <template v-for="item in classes">
            <el-option
              :label="item.classesName"
              :value="item._id"
              :key="item._id"
            ></el-option>
          </template>
        </el-select>
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
    <!-- 表单区域 渲染保险产品数据 -->
    <el-table :data="productsData" stripe style="width: 100%">
      <el-table-column prop="_id" label="产品编号"></el-table-column>
      <el-table-column prop="name" label="产品名称"> </el-table-column>
      <el-table-column prop="typesId.name" label="所属险类" width="100">
      </el-table-column>
      <el-table-column prop="time" label="保险期限" width="100">
      </el-table-column>
      <el-table-column prop="suitableFor" label="适用人群"> </el-table-column>
      <el-table-column prop="policy" label="保单形式"> </el-table-column>
      <el-table-column prop="payType" label="缴费方式" width="100">
      </el-table-column>
      <el-table-column prop="price" label="价格" width="100"> </el-table-column>
      <el-table-column prop="renew" label="可否续保" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.renew == true">是</span>
          <span v-if="scope.row.renew == false">否</span>
        </template>
      </el-table-column>
      <el-table-column prop="productsPic" label="产品图片">
        <template slot-scope="scope">
          <el-image
            style="width:70px"
            :src="'http://localhost:3000/images/' + scope.row.productsPic"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="types" label="操作">
        <template slot-scope="scope">
          <el-button v-if="scope.row.current == false" type="text" size="small"
            >上架</el-button
          >
          <el-button v-if="scope.row.current == true" type="text" size="small"
            >下架</el-button
          >
          <el-button type="text" size="small">编辑</el-button>
          <el-button
            type="text"
            size="small"
            @click="deleteProducts(scope.row._id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页功能 -->
    <div class="block">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="100"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
  'products'
)
export default {
  created() {
    // console.log(111);
    this.getProducts()
    // console.log(this.productsData);
  },
  computed: {
    ...mapState(['productsData', 'searchValue']), //获取states数据
    get() {
      return this.searchValue
    },
    set(val) {
      this.setSearchValue(val)
    },
  },

  methods: {
    ...mapMutations(['setSearchValue']),
    ...mapActions(['getProducts', 'deleteProducts']),
    clickSearchProducts() {
      this.getProducts()
    },
  },

  // methods: {
  // handleSizeChange(val) {
  //   console.log(`每页 ${val} 条`);
  // },
  // handleCurrentChange(val) {
  //   console.log(`当前页: ${val}`);
  // },
  // },
  data() {
    return {
      currentPage: 1,
      input: '',
      select: '',
      classes: [
        { _id: '1', classesName: '人寿险' },
        { _id: '2', classesName: '意外险' },
        { _id: '3', classesName: '健康险' },
      ],
    }
  },
}
</script>

<style>
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.el-table {
  margin-top: 30px;
}
.block {
  width: 670px;
  margin: 20px auto 0;
}
</style>
